import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Spin, Form, Row, Col, InputNumber, Card, Input, Select, Button, Icon, DatePicker } from 'antd'
const Search = Input.Search
const FormItem = Form.Item
const { Option } = Select
import styles from './SearchForm.less'
import { WeiboActions } from '@/actions'

class SearchForm extends Component {
  handleSearch = (e) => {
    e.preventDefault()
    const { setLoading } = WeiboActions
    const { dispatch, onSubmit } = this.props
    dispatch(setLoading('form', true))
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onSubmit(values)
      }
    })
  }
  renderForm() {
    const { getFieldDecorator } = this.props.form
    const { loading } = this.props.formState
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="关键字">
              {getFieldDecorator('keyword')(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="类别">
              {getFieldDecorator('type')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                  <Option value="0">博主</Option>
                  <Option value="1">话题</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="时间">
              {getFieldDecorator('date')(
                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
              )}
            </FormItem>
          </Col>
        </Row>
        {/*
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="调用次数">
              {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="使用状态">
              {getFieldDecorator('status3')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                  <Option value="0">关闭</Option>
                  <Option value="1">运行中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="使用状态">
              {getFieldDecorator('status4')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                  <Option value="0">关闭</Option>
                  <Option value="1">运行中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        */}
        <div style={{ overflow: 'hidden' }}>
          <span style={{ float: 'right', marginBottom: 24 }}>
            <Button type="primary" htmlType="submit" loading={loading}>
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
              重置
            </Button>
          </span>
        </div>
      </Form>
    )
  }
  render() {
    return (
      <div className={styles.tableList}>
        <div className={styles.tableListForm}>{this.renderForm()}</div>
      </div>
    )

  }
}

const FormWrap = Form.create()(SearchForm)

const mapState = state => {
  const { form: formState } = state.WeiboState
  return { formState }
}

export default connect(mapState)(FormWrap)
